<template>
	<view class="container page-container" :class="{diy:diyNav}" :style="conStyle">
		<view v-if="diyNav" class="diy-nav flex flex-ai-center flex-1"  :style="diyStyle">
			<slot name="nav"></slot>
		</view>
		<u-loading-page v-if="loading" bgColor='transparent' fontSize="12" :image="$originOssUrl+'/static/bg/loading-page.png'" loading-text="加载中..."  :loading="loading"></u-loading-page>
		<slot v-else></slot>
		<w-toast title="温馨提示" btnType='colorful' content="您还未登录,是否立即登录？" content-align="center" v-show="showLogin"  v-model="showLogin" @action='loginAction'></w-toast>
		<w-toast title="温馨提示" btnType='colorful' content="您还未实名,是否立即实名？" content-align="center" v-show="showCert" v-model="showCert" @action='certAction'></w-toast>
	</view>
</template>  

<script>
	import {OssUrl} from '@/config/index.js'
	export default { 
		name:"w-container",
		props:{
			loading:{
				type:Boolean,
				type:false
			},
			diyNav:{ 
				type:Boolean,
				type:false
			}
		},
		mounted() {
			uni.$on('showLogin',this.showLoginFn)
			uni.$on('hideLogin',this.hideLoginFn)
			uni.$on('showCert',this.showCertFn)
			uni.$on('hideCert',this.hideCertFn)
			let info= uni.getSystemInfoSync()
			this.statusBarHeight=info.statusBarHeight;
		},
		beforeDestroy() {
			// uni.$off('showLogin')
			// uni.$off('hideLogin')
		},
		data() {
			return {
				ossUrl:OssUrl,
				showLogin:false,
				showCert:false,
				statusBarHeight:0
			};
		},
		computed:{
			diyStyle(){
				let height=this.statusBarHeight+44
				
				return `
				padding-top:${this.statusBarHeight}px;height:${height}px;
				`
			},
			conStyle(){
				if(this.diyNav){
					let height=this.statusBarHeight+44
					return `
					padding-top: ${height}px;
					`
				}
			}
		},
		methods:{
			showLoginFn(){
				this.showLogin=true;
			},
			hideLoginFn(){
				this.showLogin=false;
			},
			showCertFn(){
				this.showCert=true;
			},
			hideCertFn(){
				this.showCert=false;
			},
			certAction(res){
				uni.$emit('hideCertFn')
				if(res){
					uni.navigateTo({
						url:'/pages/certification/certification'
					})
				}
			},
			loginAction(res){
				uni.$emit('hideLogin')
				if(res){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100%;
		/deep/ .u-loading-page__warpper__loading-icon__img{
			width: 320rpx !important;
			height: 320rpx !important;
		}
		// overflow-x: hidden;
	}
	.container.diy{
		
		padding-bottom: 88rpx;
		.diy-nav{
			width:100%;
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			// padding-top: 30rpx !important;
		}
	}
</style>